import React from 'react';
import axios from 'axios';
import { Button,Form} from 'antd';
import { injectIntl } from 'react-intl';
import moment from 'moment';

import asyncComponent from '../../components/echats/AsyncComponent'
const BarReact = asyncComponent(() => import(/* webpackChunkName: "LineReact" */'../../components/echats/BarReact'))  //折线图组件

@Form.create()
class StaffTotal extends React.Component {
    constructor(props) {
        super(props);
        this.date= this.getYearMonth();
        this.paramDate = this.getParamYearMonth();
        this.getParamYear = this.getParamYear();
        this.state = {
            barOption1 :{
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        name: '单位：元',
                        type : 'value'
                    }
                ],
                series : [ 
                    {
                        name:'日充值金额统计图',
                        type:'bar',
                        barWidth: '60%',
                        data:[]
                    }
                ]
            },
            barOption2 :{
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        name: '单位：元',
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'日充值金额统计图',
                        type:'bar',
                        barWidth: '60%',
                        data:[]
                    }
                ]
            }
        }
    }

    getYearMonth(){
        let myDate  = new Date();
        let year = myDate.getFullYear();
        let month = myDate.getMonth() + 1;
        return  (year+"年"+month+"月");
    }

    getParamYearMonth(){
        let myDate  = new Date();
        let year = myDate.getFullYear();
        let month = myDate.getMonth() + 1;
        if(month < 10){
            month = "0"+month
        }
        return  (year+"-"+month);
    }

    getParamYear(){
        let myDate  = new Date();
        let year = myDate.getFullYear();
        return  year;
    }



    componentDidMount(){
        axios.post('/api/statistics/user/recharge/day/qry',{
            yearMonth:this.paramDate
        }).then(res => {
            if(res && res.data  && res.data.length > 0 ){
                let amountArr = new Array();
                let dayArr =  new Array();
                let obj = res.data;
                console.log(res.data);
                let i=1;
                res.data.forEach(v => {
                    amountArr.push(v.amount);
                    dayArr.push(i+"号");
                    i++;
                 })
                this.setState(Object.assign(this.state.barOption1, {xAxis : [
                    {
                        type : 'category',
                        data : dayArr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ]}));
                this.setState(Object.assign(this.state.barOption1, {series : [
                    {
                        name:'日充值金额统计图',
                        type:'bar',
                        barWidth: '60%',
                        data:amountArr
                    }
                ]}));
            }
        });



        axios.post('/api/statistics/user/recharge/month/qry',{
            year:this.getParamYear
        }).then(res => {
            if(res && res.data && res.data.length > 0 ){
                let amountArr = new Array();
                let dayArr =  new Array();
                let obj = res.data;
                console.log(res.data);
                let i=1;
                res.data.forEach(v => {
                    amountArr.push(v.amount);
                    dayArr.push(i+"月");
                    i++;
                 })
                console.log(dayArr);
                this.setState(Object.assign(this.state.barOption2, {xAxis : [
                    {
                        type : 'category',
                        data : dayArr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ]}));
                this.setState(Object.assign(this.state.barOption2, {series : [
                    {
                        name:'月充值金额统计图',
                        type:'bar',
                        barWidth: '60%',
                        data:amountArr
                    }
                ]}));
            }
        });
    }



    render() {
        const common = this.props.intl.messages.common;
        return (
            <div>
                <span style={{textAlign:'center',display:'block'}}>{common.DailyStat}  {`(${moment().format('YYYY MM')})`}</span>
                <BarReact option={this.state.barOption1}/>   
                <br/> <br/>
                <span style={{textAlign:'center',display:'block'}}>{common.MonthlyStat}</span>
                <BarReact option={this.state.barOption2}/>   
            </div>
        );      
    }
}
export default injectIntl(StaffTotal);

